<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Vis Network | Data | DOT edge styles</title>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="../../../../standalone/umd/vis-network.min.js"></script>

    <style type="text/css">
      body,
      html {
        font: 10pt sans;
        line-height: 1.5em;
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
        color: #4d4d4d;
        box-sizing: border-box;
        overflow: hidden;
      }

      #header {
        margin: 0;
        padding: 10px;
        box-sizing: border-box;
      }

      #contents {
        height: 100%;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        position: relative;
      }

      #left,
      #right {
        position: absolute;
        margin: 0;
        padding: 10px;
        box-sizing: border-box;
        display: inline-block;
      }

      #left {
        width: 40%;
        height: 80%;
        top: 0;
        left: 0;
      }

      #right {
        width: 60%;
        height: 100%;
        top: 0;
        right: 0;
      }

      #error {
        color: red;
      }

      #data {
        width: 100%;
        height: 100%;
        border: 1px solid #d3d3d3;
        box-sizing: border-box;
        resize: none;
      }

      #draw,
      #reset {
        padding: 5px 15px;
      }

      #mynetwork {
        width: 100%;
        height: 100%;
        border: 1px solid #d3d3d3;
        box-sizing: border-box;
      }

      a:hover {
        color: red;
      }
    </style>
  </head>
  <body>
    <div id="header">
      <h1>DOT edge styles</h1>

      <div>
        <p>Example of edge styles support.</p>

        <table border="1">
          <tr>
            <th>Attributes</th>
            <th>Desriptions</th>
          </tr>
          <tr>
            <td align="center">label</td>
            <td>Text displayed on the edge</td>
          </tr>
          <tr>
            <td align="center">color</td>
            <td>Edge color</td>
          </tr>
          <tr>
            <td align="center">style</td>
            <td>Edge style ("solid", "dashed", "dotted")</td>
          </tr>
          <tr>
            <td align="center">dir</td>
            <td>
              Arrow direction ("forward", "both", "back", "none"), default is
              "forward"
            </td>
          </tr>
          <tr>
            <td align="center">arrowhead, arrowtail</td>
            <td>
              Arrow style ("dot", "box", "crow", "curve", "icurve", "normal",
              "inv", "diamond", "tee", "vee")
            </td>
          </tr>
          <tr>
            <td align="center">width or penwidth</td>
            <td>Edge width</td>
          </tr>
        </table>
      </div>
    </div>

    <div id="contents">
      <div id="left">
        <textarea id="data"> </textarea>
        <div>
          <button id="draw" title="Draw the DOT graph (Ctrl+Enter)">
            Draw
          </button>
          <button id="reset" title="Reset the DOT graph">Reset</button>
        </div>
        <div>
          <span id="error"></span>
        </div>
      </div>
      <div id="right">
        <div id="mynetwork"></div>
      </div>
    </div>

    <script type="text/javascript">
      var dotDefault =
        "digraph {\n" +
        " // Parent nodes\n" +
        ' lines[label="LINES"]; \n' +
        ' ahs[label="ARROW HEADS"]; \n' +
        "\n" +
        " // Children nodes\n" +
        ' dot[label="both dot"]; \n' +
        ' vee[label="back vee"]; \n' +
        ' diamond[label="diamond and box"]; \n' +
        "\n" +
        " // Line styles\n" +
        ' lines -- solid[label="solid pink", color="pink"]; \n' +
        ' lines -- penwidth[label="penwidth=5", penwidth=5]; \n' +
        ' lines -- dashed[label="dashed green", style="dashed", color="green"]; \n' +
        ' lines -- dotted[label="dotted purple", style="dotted", color="purple"]; \n' +
        "\n" +
        " // Arrowhead styles\n" +
        ' ahs -> box[label="box", arrowhead=box]; \n' +
        ' ahs -> crow[label="crow", arrowhead=crow]; \n' +
        ' ahs -> curve[label="curve", arrowhead=curve]; \n' +
        ' ahs -> icurve[label="icurve", arrowhead=icurve]; \n' +
        ' ahs -> normal[label="normal", arrowhead=normal]; \n' +
        ' ahs -> inv[label="inv", arrowhead=inv]; \n' +
        ' ahs -> diamond[label="diamond and box", dir=both, arrowhead=diamond, arrowtail=box]; \n' +
        ' ahs -> dot[label="both dot", dir=both, arrowhead=dot, arrowtail=dot]; \n' +
        ' ahs -> tee[label="tee", arrowhead=tee]; \n' +
        ' ahs -> vee[label="back vee", dir=back, arrowtail=vee]; \n' +
        "}";

      // create a network
      var container = document.getElementById("mynetwork");
      var options = {
        physics: {
          stabilization: false,
          barnesHut: {
            springLength: 200,
          },
        },
      };
      var data = {};
      var network = new vis.Network(container, data, options);

      $("#draw").click(draw);
      $("#reset").click(reset);

      $(window).resize(resize);
      $(window).load(draw);

      $("#data").keydown(function (event) {
        if (event.ctrlKey && event.keyCode === 13) {
          // Ctrl+Enter
          draw();
          event.stopPropagation();
          event.preventDefault();
        }
      });

      function resize() {
        $("#contents").height($("body").height() - $("#header").height() - 30);
      }

      function draw() {
        try {
          resize();
          $("#error").html("");

          // Provide a string with data in DOT language
          data = vis.parseDOTNetwork($("#data").val());

          network.setData(data);
        } catch (err) {
          // set the cursor at the position where the error occurred
          var match = /\(char (.*)\)/.exec(err);
          if (match) {
            var pos = Number(match[1]);
            var textarea = $("#data")[0];
            if (textarea.setSelectionRange) {
              textarea.focus();
              textarea.setSelectionRange(pos, pos);
            }
          }

          // show an error message
          $("#error").html(err.toString());
        }
      }

      function reset() {
        $("#data").val(dotDefault);
        draw();
      }

      window.onload = function () {
        reset();
      };
    </script>
  </body>
</html>
